<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    title="选择"
    @close="handleClose"
    :width="720"
    top="calc(50vh - 246px)"
  >
    <div class="table-dialog">
      <data-panel
        :border="false"
        :padding="0"
        ref="dataPanelRef"
        :columns="props.columns"
        :dataSource="props.dataSource"
        :otherQuery="props.otherQuery"
        :tableAttrs="{ pageSpaceHeight: 0, radio: true, rowKey: props.rowKey, ...props.tableAttrs }"
        @radio-change="handleRadioChange"
        @selection-change="handleSelectionChange"
      ></data-panel>
    </div>
    <div class="bc-modal-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import DataPanel from '@/components/DataPanel.vue'
import { ref } from 'vue'
const dialogVisible = ref(false)
const dataPanelRef = ref(null)
const emits = defineEmits(['close', 'check'])
const props = defineProps({
  /**
   * type: select|date|month|number|datetime|range
   * prop: table key
   * queryProp: form key（不选默认使用prop）
   * startProp: date|month|datetime|range专用，起始值key
   * endProp: date|month|datetime|range专用，结束值key
   * label: 字段名
   * options: select专用，枚举项[{value:"",label:""}]
   * attrs: 各输入框原始属性
   * slotName: 表格自定义列插槽名称
   * width: 列宽度
   * fixed: 固定左右侧
   * format: date|month|datetime专用，时间展示格式
   */
  columns: {
    type: Array,
    default: () => [],
  },
  // 通过接口|list获取数据
  dataSource: {
    type: [Function, Array],
    default: () => [],
  },
  otherQuery: {},
  rowKey: {
    type: String,
    default: 'id',
  },
  tableAttrs: {
    type: Object,
    default: () => ({}),
  },
})

const open = () => {
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  emits('close')
}

const radioValue = ref(null)
const handleRadioChange = (value) => {
  radioValue.value = value
}
const sectionValue = ref([])
const handleSelectionChange = (value) => {
  sectionValue.value = value
}
const handleSubmit = () => {
  if (props.tableAttrs.selection) {
    emits('check', sectionValue.value)
  } else {
    emits('check', radioValue.value)
  }
  handleClose()
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.table-dialog {
  height: 391px;
  padding: 16px 22px;
}
.bc-modal-footer {
  border-top: #f0f0f0 1px solid;
  padding: 10px 16px;
  background-color: #fff;
  text-align: right;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
</style>
